* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   width: 100vw;
}

// 底部Tabar
.adm-tab-bar {
   box-sizing: border-box;
   width: 100%;
   height: 48px;
   position: fixed;
   bottom: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

// 头部搜索框
.myheader {
   padding: 20px;
   background-color: red;
   display: flex;
   // background-color: rgb(77, 156, 241);
   align-items: center;

   input {
      border-radius: 8px;
      height: 32px;
      width: 84%;
      outline: none;
      text-align: center;
   }

   span {
      text-align: center;
      flex: 1;
      padding: 0 6px;
   }
}

// 轮播图
.banner {
   height: 200px;

   img {
      width: 100%;
   }
}

//  护肤彩妆等商品列表
.mata {
   background-color: rgb(251, 213, 219, 0.5);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   padding: 10px;

   .cate {
      width: 20%;
      text-align: center;
   }

   img {
      width: 40%;
   }

   .name {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
}

.mate {
   margin-top: 45px;
   background-color: rgb(251, 213, 219, 0.5);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   padding: 10px;

   .cate {
      width: 20%;
      text-align: center;
   }

   img {
      width: 40%;
   }

   .name {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
}

.tabar {
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 10px;
   position: fixed;
   bottom: 0;
   box-shadow: 1px 1px 1px black;

   .bar {
      width: 20%;
      text-align: center;

      img {
         width: 26%;
      }

   }
}

//  登录
.login {
   width: 100%;
   margin: 50px auto;
   text-align: center;
   padding: 50px 0;

   // background-color: pink;
   .title {
      height: 30px;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 40px;
   }

   .input {
      width: 100%;
      margin: 10px auto;

      input {
         width: 80%;
         height: 40px;
         border-radius: 6px;
         outline: none;
         border: 1px solid rgb(172, 171, 171);
         border-radius: 6px;
      }
   }
}

// 商品分类
.app {
   box-sizing: border-box;

   .main {
      display: flex;

      .cateleft {
         width: 20%;
         text-align: center;
         //    padding-top: 10px;
         background-color: rgb(245, 242, 242);

         .name {
            height: 60px;
            font-size: 16px;
            line-height: 60px;
         }

         .active {
            color: red;
            border-left: 3px solid red;
            background-color: #fff;
         }
      }

      .cate {
         margin-top: 25px;
         flex: 1;
         margin-left: 6px;
         margin-bottom: 60px;
      }

      .caterigth {
         .catemain {
            display: flex;
            flex-wrap: wrap;
         }

         .listitem {
            width: 30%;
            text-align: center;
            margin: 4px;

            img {
               width: 100%;
            }

            .name {
               font-size: 16px;
            }
         }
      }
   }
}

.top {
   display: flex;
   align-items: center;
   padding: 10px;
   font-weight: bold;
   font-size: 18px;

   .navtwo {
      margin: 10px;
   }
}

//  所有商品
.catelist {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-around;
   flex-wrap: wrap;
   background-color: rgb(241, 240, 240);
   margin-bottom: 50px;

   .list {
      width: 48%;
      background-color: #fff;
      margin-top: 10px;

      text-align: left;

      img {
         width: 80%;
      }

      .name {
         padding: 5px 6px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
      }

      span {
         font-size: 18px;
         color: red;
      }
   }
}

// 推荐商品
.recomlist {
   min-height: 300px;

   //   background-color: red;
   .retop {
      width: 100%;
      box-sizing: border-box;
      background-color: red;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .left {
         display: flex;
         align-items: center;
         justify-content: space-between;

         .time {
            font-size: 18px;

            p {
               font-size: 18px;
            }
         }
      }
   }

   .list {
      background-color: rgb(241, 240, 240);
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      justify-content: start;
      align-items: center;
      margin-bottom: 40px;

      .relist {
         width: 33%;

         img {
            width: 90%;
         }

         .name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
         }
      }
   }
}

// 顶部标识
.topbiao {
   width: 100%;
   display: flex;
   align-items: center;

   h3 {
      width: 74%;
      height: 30px;
      line-height: 30px;
      padding-left: 40%;
      font-size: 18px;
   }

   .top-name {
      width: 26%;
   }
}

// loding样式
.com_loading {
   width: 100%;
}

// 详情页面
// 轮播图
.adm-swiper {
   width: 100%;

   img {
      width: 100%;
   }
}

.goodinfo {
   width: 100%;
   padding: 0 10px;

   .money {
      font-size: 22px;
      color: red;
      font-weight: 600;
      padding: 10px;
   }

   .name {
      width: 100%;
      padding: 0 10px;
      font-size: 16px;

   }
}

.tabar {
   width: 100%;
   height: 48px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   bottom: 0;
   padding: 0 10px;

   .active {
      color: red;
   }

   .btn {
      width: 48%;
      height: 42px;
      display: flex;
      line-height: 42px;
      border: 1px solid #fff;
      color: #fff;

      .btn-left {
         width: 50%;
         background-color: rgb(255, 208, 0);
         text-align: center;
         border-radius: 24px 0 0 24px;
      }

      .btn-right {
         width: 50%;
         background-color: rgb(255, 13, 0);
         text-align: center;
         border-radius: 0 24px 24px 0;
      }
   }
}

// 详情页顶部
.adm-nav-bar-title {
   display: flex;
   justify-content: space-between;
   width: 60%;
}

.colle {
   display: flex;

   img {
      width: 30%;
   }

   .colleright {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 8px 0;

      .name {
         font-size: 16px;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
      }

      span {
         font-size: 16px;
         color: red;
         font-weight: 600;
      }

      .money {
         display: flex;
         justify-content: space-between;
         padding: 0 10px;

         button {
            padding: 6px 10px;
            border: none;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            background-color: rgb(190, 239, 134);
         }
      }

   }
}

// 个人中心页面
.mine {
   height: 100%;
   display: flex;
   flex-direction: column;

   .header {
      display: flex;
      align-items: flex-end;
      padding: 40px;

      // line-height: 150px;
      img {
         width: 80px;
         height: 80px;
         border-radius: 50%;
      }

      .name {
         width: 80px;
         height: 80px;
         text-align: center;
         line-height: 80px;
         font-size: 20px;
         font-weight: 700;

      }
   }

   .main {
      flex: 1;
      background-color: #F7F7F7;
      // height: 100%;
      padding: 10px;
      overflow: auto;

      .main-top {

         display: flex;
         align-items: center;
         justify-content: space-around;
         border-radius: 5px;
         background-color: white;
         font-size: 18px;
         height: 50px;

         .num {
            text-align: center;
         }

         .blod {
            font-weight: bold;
         }
      }

      .main-dingdan {
         margin: 10px 0;
         background-color: white;
         border-radius: 15px;

         .titel {
            font-size: 18px;
            display: flex;
            padding: 10px;
            justify-content: space-between;

            h4 {
               margin-left: 10px;
            }
         }

         .btn {
            font-size: 18px;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
         }
      }

      .huiyuan {

         background-color: white;
         font-size: 16px;
         font-weight: 600;
         padding: 10px 10px;
      }

      .main-bottom {
         font-size: 18px;
         background-color: white;
         border-radius: 10px;

         div {


            font-size: 16px;
            font-weight: 600;
            padding: 10px 10px;
         }
      }
   }
}

// 购物车
.shopplist {
   width: 94%;
   margin: auto;

   .shopplist_one {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .shopplist_one_left {

         width: 37%;
         height: 90px;
         display: flex;
         justify-content: space-around;
         margin-top: 20px;

         .shopplist_one_input {
            padding-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
         }

         .imgbox {
            margin-top: -15px;
            width: 120px;

            img {
               width: 100%;
            }
         }
      }

      .shopplist_one_right {
         flex: 1;

         .name {
            font-size: 16px;
            margin-top: 10px;
            font-weight: bold;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
         }

         .p2 {
            font-size: 18px;
            font-weight: bold;
         }

         .p3 {
            width: 60px;
            height: 16px;
            margin-top: 10px;
            line-height: 16px;
            font-size: 12px;
            text-align: center;
            color: rgb(228, 16, 179);
            padding: 0 2px;
            border-radius: 2px;
            border: 1px solid rgb(235, 77, 88);
         }

         .Preferential {
            width: 150px;
            color: rgba(211, 74, 16, 0.881);
            // background-color: rgb(118, 92, 75);
            font-size: 14px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 8px;
            border: 1px solid rgb(118, 92, 75);
            margin-top: 10px;
         }

         .time {
            width: 120px;
            height: 18px;
            text-align: center;
            border-radius: 4px;
            line-height: 18px;
            color: red;
            font-size: 14px;
            background-color: rgba(255, 224, 224, 0.708);
            margin-top: 10px;
         }

         .money {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            p {
               color: red;
               font-size: 18px;
            }

            .anniu {
               display: flex;

               button {
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
               }

               p {
                  width: 30px;
                  height: 23px;
                  text-align: center;
                  line-height: 25px;

               }
            }

         }

         .xiangou {
            color: red;
            float: right;
         }
      }
   }
}

.settlement {
   width: 100%;
   height: 60px;
   text-align: center;
   line-height: 60px;
   position: fixed;
   bottom: 48px;
   background-color: white;
}

.settlement_1 {
   width: 90%;
   margin: auto;
   display: flex;
   justify-content: space-between;

   .settlement_right {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 30px;

      p {
         span {
            color: red;
            font-size: 16px;
            font-weight: bold;
         }
      }

      button {
         width: 120px;
         height: 36px;
         background-color: red;
         padding: 5px 15px;
         border-radius: 18px;
         position: absolute;
         top: 12px;
         right: 0;
      }
   }

   .clearcart {
      height: 30px;
      line-height: 20px;
      text-align: center;
      margin-left: 20px;
      border: 1px solid rgb(209, 205, 205);
      border-radius: 6px;
      background-color: rgb(234, 125, 125);
      color: #fff;
      padding: 6px;
      box-shadow: 1px 1px 1px black;
   }
}

// 详情页轮播图
.ig {
   width: 100%;
   height: 400px;
}